<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="items" v-for="(item, index) in list" :key="index">
				<view class="label">
					{{ item.label }}
				</view>
				<view class="contents" v-for="(it, ind) in item.content"
					:style="{ color: indesActive == it ? 'rgb(255,210,2)' : 'rgb(227, 227, 227)', backgroundColor: indesActive == it ? item.backgroundColor : 'rgb(213, 213, 213)' }">
					{{ it }}
					<view class="tops"
						:style="{ borderBottomColor: indesActive == it ? item.backgroundColor : 'rgb(213, 213, 213)' }">

					</view>
					<view class="bottom"
						:style="{ borderTopColor: indesActive == it ? item.backgroundColor : 'rgb(213, 213, 213)' }">

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	systemInfo
} from '../../utils/mixin'
import {
	getInfo,
} from '@/api/index.js'
export default {
	components: {},
	mixins: [systemInfo],
	data() {
		return {
			list: [{
				label: '启蒙',
				content: [1, 2, 3],
				backgroundColor: 'rgb(150,232,246)'
			},
			{
				label: '基础',
				content: [4, 5, 6],
				backgroundColor: 'rgb(164,192,232)'
			},
			{
				label: '强化',
				content: [7, 8, 9],
				backgroundColor: 'rgb(219,167,248)'
			},
			{
				label: '提升',
				content: [10, 11, 12],
				backgroundColor: 'rgb(246,156,156)'
			},
			],
			indesActive: 1
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();
		this.getDetail()
	},
	methods: {
		// 获取详细信息
		async getDetail() {
			const res = await getInfo()
			this.indesActive = res.data.user.levelId
		},
	}
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.view {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 60rpx 30rpx 0 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15px;

		.items {
			width: 100%;
			height: 220rpx;
			border: 1px solid rgba(179, 173, 173, 0.2);
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 90rpx;
			position: relative;
			z-index: 1;
			border-radius: 8rpx;

			.label {
				position: absolute;
				top: -23rpx;
				color: rgb(179, 173, 173);
				font-size: 34rpx;
				z-index: 2;
				width: 88rpx;
				text-align: center;
				background-color: #fff;
				left: 30rpx;
			}

			.contents {
				position: relative;
				width: 100rpx;
				/* 六边形的宽度 */
				height: 60rpx;
				/* 六边形的高度 */
				margin: 50rpx auto;
				text-align: center;
				line-height: 60rpx;
				font-size: 60rpx;
				font-weight: 800;
				color: rgb(227, 227, 227);

				.tops {
					width: 0;
					height: 0;
					border-left: 50rpx solid transparent;
					border-right: 50rpx solid transparent;
					border-bottom: 25rpx solid;
					position: absolute;
					top: -25rpx;
				}

				.bottom {
					width: 0;
					height: 0;
					border-left: 50rpx solid transparent;
					border-right: 50rpx solid transparent;
					border-top: 25rpx solid;
					position: absolute;
					top: 60rpx;
				}
			}


		}

	}
}
</style>